<template>
  <ul class="ul">
    <template v-if="data.length">
      <TreeItem
        v-for="(item, index) in data"
        :key="index"
        :item="item"
        :leval="0"
        :activeId="activeId"
        :activeName="activeName"
        :name="name"
        :childrenName="childrenName"
        :action="action"
        :detailBtn="detailBtn"
        :editBtn="editBtn"
        :deleteBtn="deleteBtn"
        :current-level="data"
        :up-one-level="[]"
      ></TreeItem>
    </template>
    <div class="none" v-else>
      暂无数据
    </div>
  </ul>
</template>

<script>
export default {
  provide() {
    return {
      treeRoot: this,
    };
  },
  props: {
    data: {
      type: Array,
      required: true,
    },
    activeName: {
      type: String,
      default: 'id',
    },
    name: {
      type: String,
      default: 'name',
    },
    childrenName: {
      type: String,
      default: 'children',
    },
    initActive: [Number, String],
    action: {
      type: Boolean,
      default: false,
    },
    detailBtn: {
      type: Boolean,
      default: false,
    },
    editBtn: {
      type: Boolean,
      default: false,
    },
    deleteBtn: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    initActive: {
      handler(newVal) {
        if (newVal || newVal == 0) {
          this.activeId = newVal;
        }
      },
      deep: true,
      immediate: true,
    }
  },
  data() {
    return {
      activeId: null,
    };
  },
  components: {
    TreeItem: () => import('./TreeItem.vue')
  },
};
</script>

<style lang="scss" scoped>
.ul {
  padding: 1px 0 0;
  margin: 0;
}
.none {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #999999;
  border: 1px solid #d9d9d9;
}
</style>
